<template>
  <div class="chart-box">
    <div id="chart-6" style="min-width: 460px; height: 350px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      opinionData: ["3", "2", "4", "4", "5"],
      start: null,
      end: null,
    };
  },
  created() {
    this.axios({
      url: "grad/yearList",
      methods: "get",
    }).then((res) => {
      let years = res.data.data;

      years = years.sort(function (a, b) {
        return a - b;
      });

      //默认为最近一年
      this.start = years[years.length - 1];
      this.end = years[years.length - 1];

      this.initData();
    });
  },
  mounted() {
    //调用
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  computed: {
    myChart() {
      return echarts.init(document.getElementById("chart-6"));
    },
  },
  methods: {
    //初始化数据
    initData() {
      this.axios({
        url: "/grad/total/change",
        method: "get",
        params: {
          year: this.start,
          grade: "",
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          let bachelor = this.count_kind(res.data.data.bachelor);
          let master = this.count_kind(res.data.data.master);
          let sum = bachelor + master;
          //  调整成输出格式
          this.$nextTick(() => {
            this.drawLine();
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawLine() {
      echarts.init(document.getElementById("chart-6")).dispose();
      // this.chart = echarts.init(document.getElementById('chart-6'))
      // this.chart.setOption({
      this.myChart = echarts.init(document.getElementById("chart-6"));
      this.myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["近七日收益"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "近七日收益",
            type: "line",
            stack: "总量",
            data: this.opinionData,
          },
        ],
      });
    },
    goTo(route) {
      this.$router.push(route);
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>
<style scoped>
.chart-box {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}

.chart-box :hover {
  cursor: pointer;
}
</style>
